<!-- templates/doc.html -->
{{define "doc"}}
<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>{{.message.Meta.title}} - {{.extend.profile.name}}</title>
		<meta name="description" content="{{.message.Meta.description}}" />
		<link rel="alternate" href="{{.path}}" hreflang="en" />
		<link rel="canonical" href="{{.path}}" />
		<link rel="stylesheet" href="/assets/css/output.css" />
		<link rel="stylesheet" href="/assets/css/markdown.min.css" />
	</head>

	<body>
		<!-- header -->
		{{template "header" .}}

		<!-- main -->
		<main class="py-3 bg-gray-100">
			<div class="w-11/12 max-w-screen-xl mx-auto my-5 py-5 bg-white rounded-md flex flex-row flex-wrap">
				<aside class="w-full md:w-1/5 md:border-r markdown-body">
					<ul>
						{{range $i, $v := .catalog}}
						<li>
							<p class="flex flex-row">
								<span class="w-2/3 text-xl">{{add $i 1}}. {{$v.Subject}}</span>
								<span class="w-1/3 text-center text-sm">({{$v.Count}})</span>
							</p>
							<ul>
								{{range .Data}}
								<li>
									<a href="/doc/{{$v.Name}}/{{.Name}}/">{{.Meta.title}}</a>
								</li>
								{{end}}
							</ul>
						</li>
						{{end}}
					</ul>
				</aside>
				<div class="w-full md:w-4/5 px-7">
					<h1 class="text-3xl">{{.message.Meta.title}}</h1>
					<div class="flex flex-row justify-between md:justify-start">
						<p class="py-3 text-gray-500 flex flex-row justify-center md:justify-start items-center">
							<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
								<path
									stroke-linecap="round"
									stroke-linejoin="round"
									stroke-width="2"
									d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"
								/>
							</svg>
							<span class="mx-2 text-sm"> {{.message.Meta.date}}</span>
						</p>
					</div>
					<div class="markdown-body flex flex-row flex-wrap">
						<article class="w-full {{if .message.Meta.toc}}md:w-3/4{{end}}">{{safe (lazy .message.Content)}}</article>
						{{if .message.Meta.toc}}
						<aside class="hidden md:block md:w-1/4">
							<div class="text-sm text-gray-500 sticky top-0">
								<p class="px-7 line-10 leading-10 text-lg">table of contents</p>
								{{safe .message.Meta.toc}}
							</div>
						</aside>
						{{end}}
					</div>
				</div>
			</div>
		</main>

		<!-- footer -->
		{{template "footer" .}}
	</body>
</html>
{{end}}
